<template>
	<!-- 文章评论 -->
	<view class="box">
		<view class="content">
			<text class="title">{{ data.title }}</text>
			<view class="sub flex alignC">
				<image src="../../static/img/user.png" mode=""></image>
				<text class="name">{{ data.creator }}</text>
			</view>
			<view class="cont">
				<!-- <u-parse :html="data.content"></u-parse> -->
				<rich-text :nodes="data.content"></rich-text>
				<!-- {{ data.content }} -->
			</view>
			<view class="time">发布于{{data.createTime}}</view>
			<view class="commentList">
				<text class="num">评论{{data.commentNum}}</text>
				<view class="list" v-for="(item, index) in commentList" :key="index">
					<view class="info flex">
						<image src="../../static/img/user.png" mode="" class="userIcon"></image>
						<view class="flex" style="flex-direction: column;margin-left: 20rpx;">
							<text style="font-size: 28rpx;color: #333;">{{ item.discussantName }}</text>
							<text style="font-size: 24rpx;color: #ccc;">{{ item.createTime }}</text>
						</view>
					</view>
					<view class="right">
						<view class="comment">
							{{ item.discussContent}}
						</view>
						<!-- 回复 -->
						<view class="reply flex fjb alignC">
							<view @click="callBack(item)">回复</view>
							<!-- <view class="flex alignC">
								<u-icon name="thumb-up" color="#ccc" size="24"></u-icon>
								<text>{{ item.zanNum }}</text>
							</view> -->
						</view>
						<!-- 别人的回复 -->
						<view class="otherReply" v-if="item.children && item.children.length > 0">
							<view class="" v-for="(v,k) in item.children" :key="k" style="line-height: 45rpx;">
								<text style="margin-right: 10rpx;">{{ v.discussantName }}: </text>
								<text>{{ v.discussContent }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 评论框 -->
		<view class="commentBtn flex">
			<image src="../../static/img/user.png" mode=""></image>
			<view class="commentIpt">
				<u--input :placeholder="placeholder" border="surround" v-model="discussContent" @blur="onBlur"
					:focus="focus"></u--input>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		addCommentApi,
		findByArticleIdApi
	} from '../../common/API/articleApi.js'
	export default {
		data() {
			return {
				data: {

				},
				commentList: [],
				articleId: 0,
				discussContent: "",
				preDiscussId: '',
				placeholder: '写下你的想法吧',
				focus: false,
			}
		},
		onLoad(option) {
			console.log("option", option)
			let item = JSON.parse(decodeURIComponent(option.item))
			console.log("数据", item)
			this.data = item
			this.data.content = this.data.content.replace(/<img /g, '<img style="max-width:100%;vertical-align: top;"')
			console.log("数据data", this.data.content)
			this.findByArticleId()
		},
		methods: {
			callBack(item) {
				this.preDiscussId = item.id
				this.placeholder = `回复${item.discussantName}: `
				this.focus = false
				this.$nextTick(() => {
					this.focus = true
				})
			},
			async onBlur(e) {
				if (e != '') {
					console.log('change', e);
					this.discussContent = e
					this.articleId = this.data.id
					const res = await addCommentApi({
						articleId: this.articleId,
						discussContent: this.discussContent,
						preId: this.preDiscussId
					})
					if (res.status == 200) {
						uni.showToast({
							title: "评论成功"
						})
						this.placeholder = '写下你的想法吧'
						this.preDiscussId = ''
						this.discussContent = ''
						this.findByArticleId()
					}
				}

			},
			async findByArticleId() {
				const res = await findByArticleIdApi(this.data.id)
				console.log('评论', JSON.stringify(res))
				this.commentList = res.data
			}

		}
	}
</script>
<style>
	page {
		background: #fff;
	}
</style>
<style scoped lang="scss">
	.content {
		color: #333;
		font-size: 28px;
		padding: 30rpx 20rpx;
		height: calc(100vh - 200rpx);
		overflow-y: scroll;

		.title {
			font-size: 34rpx;
			color: #333;
		}

		.sub {
			margin: 20rpx 0 50rpx;

			image {
				width: 44rpx;
				height: 44rpx;
				margin-right: 10rpx;
			}

			.name {
				font-size: 24rpx;
				color: #999;
			}
		}

		.time {
			font-size: 24rpx;
			color: #999;
			margin: 30rpx 0 20rpx;
		}

		.commentList {
			.num {}

			.list {
				margin-top: 20rpx;

				.info {
					align-items: center;
				}

				.userIcon {
					width: 80rpx;
					height: 80rpx;
				}

				.right {
					margin-left: 100rpx;

					.comment {
						font-size: 30rpx;
						color: #333;
						margin: 20rpx 0;
					}

					.otherReply {
						margin-top: 20rpx;
						padding: 20rpx;
						background: #F8F8F8;
						border-radius: 16px;
					}
				}
			}
		}
	}

	.commentBtn {
		margin-top: 120rpx;
		position: fixed;
		bottom: 0;
		height: 112rpx;
		width: 94%;
		border-top: 2rpx solid #F2F2F2;
		padding: 10rpx 20rpx;
		display: flex;
		align-items: center;

		image {
			width: 50rpx;
			height: 50rpx;
		}

		.commentIpt {
			flex: 1;
			margin-left: 30rpx;

			/deep/ .u-input {
				border-radius: 40rpx;
				background: #F8F8F8;
				border: none;
				height: 40rpx;

				.u-input__content__field-wrapper__field {
					font-size: 24rpx !important;
					padding-left: 10rpx;
				}
			}
		}
	}
</style>